import AddStudent from "./add.js";
import UpdateStudent from "./update.js";
const $ = layui.$;
export default class Student{
    constructor(){
        this.render();
        this.handle();
    }
    render(){
        let template = `
        <h1>学生管理</h1>
        <form class="layui-form" lay-filter="searchForm">
        <div class="layui-form-item">
            <div class="layui-input-inline" style="width: 80px">
            <button id="addBtn" type="button" class="layui-btn">
                <i class="layui-icon"></i>
            </button>
            </div>
            <div class="layui-input-inline" style="width: 80px">
            <select name="type">
                <option value="">所有</option>
                <option value="name">姓名</option>
                <option value="gender">性别</option>
                <option value="age">年龄</option>
                <option value="className">班级名称</option>
            </select>
            </div>
            <div class="layui-input-inline">
            <input
                type="text"
                name="value"
                placeholder="请输入搜索内容"
                autocomplete="off"
                class="layui-input"
            />
            </div>
            <div class="layui-input-inline">
            <button type="button" id="searchBtn" class="layui-btn">
                <i class="layui-icon layui-icon-search"></i>
            </button>
            </div>
        </div>
        </form>
        <table id="studentTable" lay-filter="studentTable"></table>
        <script type="text/html" id="studentBar">
          <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
          <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del"
              >删除</a
          >
        </script>
        <script type="text/html" id="addStudentTemplate"></script>
        <script type="text/html" id="updateStudentTemplate"></script>
        `;
        $("#content").html(template);
    }
    handle(){
        new AddStudent();
        let table = layui.table;
        let form = layui.form;
        
        form.render();
        table.render({
          elem: "#studentTable",
          url: "/students", //数据接口
          page: {
            //支持传入 laypage 组件的所有参数（某些参数除外，如：jump/elem） - 详见文档
            layout: ["limit", "count", "prev", "page", "next", "skip"], //自定义分页布局
            //,curr: 5 //设定初始在第 5 页
            groups: 5, //只显示 5 个连续页码
            first: "首页", //不显示首页
            last: "尾页", //不显示尾页
            limits: [1, 3, 5, 10, 15, 20],
            limit: 3,
          },
          cols: [
            [
              //表头
              { field: "name", title: "姓名" },
              { field: "gender", title: "性别", sort: true },
              { field: "age", title: "年龄", sort: true },
              { field: "cls", title: "所属班级",
              templet: function(d){
                console.log(d);
                return d.cls ? d.cls.name : '';
              }},
              { fixed: "right", title: "操作", toolbar: "#studentBar" },
            ],
          ],
          parseData: function (res) {
            //res 即为原始返回的数据
            return {
              code: 0, //解析接口状态
              msg: "", //解析提示文本
              count: res.total, //解析数据长度
              data: res.rows, //解析数据列表
            };
          },
          request: {
            pageName: "current", //页码的参数名称，默认：page
            limitName: "size", //每页数据量的参数名，默认：limit
          },
        });


        //监听行工具事件
        table.on("tool(studentTable)", function (obj) {
          var data = obj.data;
          console.log(obj);
          if (obj.event === "del") {
            layer.confirm("真的删除行么", function (index) {
              $.ajax({
                type: "delete",
                url: "/students/" + data._id,
                success() {
                  layer.close(index);
                  table.reload("studentTable", {
                    page: {
                      curr: 1,
                    },
                  });
                },
              });
            });
          } else if (obj.event === "edit") {
              new UpdateStudent(data);
          }
        });

        $("#searchBtn").click(function () {
          console.log(form.val("searchForm"));
          table.reload("studentTable", {
            where: form.val("searchForm"),
            page:{
                 //支持传入 laypage 组件的所有参数（某些参数除外，如：jump/elem） - 详见文档
                layout: ["limit", "count", "prev", "page", "next", "skip"], //自定义分页布局
                //,curr: 5 //设定初始在第 5 页
                groups: 5, //只显示 5 个连续页码
                first: "首页", //不显示首页
                last: "尾页", //不显示尾页
                limits: [1, 3, 5, 10, 15, 20],
                limit: 3,
                curr:1
            }
          });
        });
      
    }
}